<template>
	<view class="shop-info">
		<view class="title">商家信息</view>
		<view class="shop" @click="handDetail">
			<view class="avatar">
				<image :src="info.avatar" mode="aspectFill"></image>
				<view class="tag">{{ info.type === 'DEALER' ? '车商' : '平台自营' }}</view>
			</view>
			<view class="info">
				<view class="name">{{ info.merchantName }}</view>
				<view class="desc">
					<text>在租车辆：{{ info.productSum }}辆</text>
					<text>累计订单：{{ info.orderSum }}</text>
				</view>
			</view>
			<view class="btn">
				<button class="cu-btn" @click.stop="followChange">
					<template v-if="info.isConcern">
						<text style="padding-left: 3rpx;">取消关注</text>
					</template>
					<template v-else>
						<uv-icon size="12" name="plus" color="#333333"></uv-icon>
						<text style="padding-left: 5rpx;">关注</text>
					</template>
				</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		defineProps,
		defineEmits
	} from 'vue'
	import {
		doAdd,
		doDel
	} from '@/apis/follow.js'
	import {
		useAppsStore
	} from '@/stores/modules/app.js'
	import {
		storeToRefs
	} from 'pinia'
	const emit = defineEmits(['followChange', 'backInfo'])
	const props = defineProps({
		info: {
			type: Object,
			default: () => {}
		}
	})
	const useStore = useAppsStore()
	const {
		getUserInfo: userInfo,
		getCityName: cityName
	} = storeToRefs(useStore)

	const handUser = () => {
		return new Promise((rel, rej) => {
			if (userInfo.value?.id) {
				return rel(true)
			}
			uni.navigateTo({
				url: '/pagesA/login/login'
			})
			rej('请先登录')
		})
	}
	const followChange = async () => {
		await handUser()
		if (props.info.isConcern) {
			await doDel(props.info.merchantId)
		} else {
			await doAdd({
				merchantId: props.info.merchantId
			})
		}
		emit('followChange')
	}
	const handDetail = () => {
		uni.navigateTo({
			url: `/pagesA/shop/home?id=${props.info.merchantId}`,
			events: {
				backInfo: (info) => {
					emit('backInfo', info)
				}
			}
		})
	}
</script>

<style lang="scss" scoped>
	.shop-info {
		margin-top: 28rpx;
		padding: 24rpx;
		box-sizing: border-box;
		border-radius: 16rpx;
		background: #FFFFFF;

		.title {
			font-size: 36rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
		}

		.shop {
			margin-top: 32rpx;
			display: flex;
			align-items: center;

			.avatar {
				position: relative;
				padding-bottom: 10rpx;

				image {
					width: 140rpx;
					height: 140rpx;
					border-radius: 50%;
				}

				.tag {
					font-size: 26rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					background: linear-gradient(180deg, #FFBE2F 0%, #FC542D 100%);
					border-radius: 20rpx;
					position: absolute;
					bottom: 0;
					left: 50%;
					width: 126rpx;
					padding: 5rpx 0;
					text-align: center;
					transform: translateX(-50%);
				}
			}

			.info {
				flex: 1;
				padding: 0 24rpx;

				.name {
					font-size: 30rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #333333;
				}

				.desc {
					margin-top: 18rpx;
					display: flex;
					flex-direction: column;
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;

					text {
						&:last-child {
							margin-top: 8rpx;
						}
					}
				}
			}

			.btn {
				.cu-btn {
					background: #FFC434;
					font-size: 28rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #333333;
				}
			}
		}
	}
</style>